<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			html,
			body{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			.wrap{
				width: 50px;
				height: 50px;
				position: absolute;
				right: 30px;
				bottom: 30px;
			}
			.wrap .inner{
				width: 100%;
				height: 100%;
			}
			.wrap > .inner > img{
				width: 50px;
				height: 50px;
				position: absolute;
				left: 0px;
				top: 0px;
				border-radius: 50%;
				transition: 1s;
			}
			.wrap > .home{
				background-image: url(images/home.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: 1;
				border-radius: 50%;
				transition: 1s;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="inner">
				<img src="images/p0.png" alt="图标1" />
				<img src="images/p1.png" alt="图标2" />
				<img src="images/p2.png" alt="图标3" />
				<img src="images/p3.png" alt="图标4" />
				<img src="images/p4.png" alt="图标5" />
			</div>
			<div class="home">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 1. 在元素首次渲染还没有完成的情况下,是不会触发过渡的
		// 2. 在绝大多数变换样式切换时,如果变换函数的位置 个数不相同也不会触发过渡
		window.onload = function () {
			var homeEle = document.querySelector(".home");
			var images = document.querySelectorAll(".wrap .inner img");
			var c = 140;
			var flag = true;
			homeEle.onclick = function () {
				if (flag) {
					this.style.transform = "rotate(-360deg)";
					for (var i = 0; i < images.length; i++) {
						images[i].style.transition = "1s " + 0.05 * i + "s";
						images[i].style.transform = "rotate(-360deg)";
						images[i].style.left = -getPoint(c, 90 / (images.length - 1) * i).left + "px";
						images[i].style.top = -getPoint(c, 90 / (images.length - 1) * i).top + "px";
					}
				} else {
					this.style.transform = "rotate(360deg)";
					for (var i = 0; i < images.length; i++) {
						images[i].style.transition = "1s " + 0.05 * (images.length - 1 - i) + "s";
						images[i].style.transform = "rotate(360deg)";
						images[i].style.left = "0px";
						images[i].style.top = "0px";
					}
				}
				flag = !flag;
			};
			// 已知第三边和一个角
			function getPoint(c, deg) {
				var x = Math.round(c * Math.sin(deg * Math.PI / 180));
				var y = Math.round(c * Math.cos(deg * Math.PI / 180));
				return {left: x, top: y};
			}
		};
	</script>
</html>
